import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ListView,
    TouchableOpacity,
    DeviceEventEmitter,
    Platform,
    StatusBar
} from 'react-native';
import SegmentNavBar from '../../common/SegmentBar/SegmentNavBar'
import BackUpDetailsPage from "./BackUpDetailsPage";
import AuditPage from "./AuditPage";
import LendingDetailsPage from "./LendingDetailsPage";
const {height, width} = Dimensions.get('window');
export default class PaginationPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isShow:false
        }
    };

    _navigator=(navView)=> {
        return (
            <View>
                <StatusBar
                    backgroundColor='#ffffff'
                    barStyle={'dark-content'}
                />
                <View style={styles.titleView}>
                    <TouchableOpacity
                        onPress={()=>Actions.PersonalCenterTabPage()}
                        style={styles.goBackView}>
                        <Image
                            source={ImageUtil.GoBack}
                            style={styles.goBackImg}/>
                    </TouchableOpacity>
                    <View style={styles.navigationView}>
                        {navView}
                    </View>
                    <TouchableOpacity
                        onPress={()=>this.setState({
                            isShow:true
                        })}
                        style={styles.completeView}>
                        <Image
                            source={ImageUtil.Adjunction}
                            style={styles.goBackImg}/>
                    </TouchableOpacity>
                </View>
            </View>
        )
    };

    goToPage=(page)=>{
        this.setState({
            isShow:false
        },()=>{
            Actions.push(page)
        })
    };

    render() {
        return (
            <View style={styles.container}>
                {this.state.isShow
                    ?(<TouchableOpacity
                        onPress={()=>this.setState({
                            isShow:false
                        })}
                        style={{position: 'absolute',top:0,bottom:0,left:0,right:0,
                            backgroundColor:'rgba(0,0,0,0)',zIndex:2}}>
                        <View style={styles.showView}>
                            <View style={{flexDirection:'row'}}>
                                <View style={styles.triangleLeft}/>
                                <View style={styles.triangleRight}/>
                            </View>
                            <View style={{backgroundColor:'#000000',width:110,height:69,borderRadius:5}}>
                                <TouchableOpacity
                                    onPress={()=>this.goToPage('ArrearsModifyInformationPage')}
                                    style={{alignItems:'center',flexDirection:'row',height:34,width:110}}>
                                    <Image
                                        source={ImageUtil.Upload}
                                        style={{marginLeft:14,height:18,width:18}}/>
                                    <Text style={{fontSize:14,marginLeft:12,color:'#ffffff'}}>上传老赖</Text>
                                </TouchableOpacity>
                                <View style={{height:1,width:100,backgroundColor:'#ffffff',marginLeft:5}}/>
                                <TouchableOpacity
                                    onPress={()=>this.goToPage('ModifyLendingInformationPage')}
                                    style={{ alignItems:'center',flexDirection:'row',height:34,width:110}}>
                                    <Image
                                        source={ImageUtil.AddLending}
                                        style={{marginLeft:14,height:18,width:18}}/>
                                    <Text style={{fontSize:14,marginLeft:12,color:'#ffffff'}}>添加放贷</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </TouchableOpacity>)
                    :(<View>

                    </View>)}
                <View style={{flex:1}}>
                    <SegmentNavBar
                        ref='segNavBar'
                        segmentWidth={200}
                        segmentHeight={30}
                        titleSize={13}
                        navigator={this._navigator}
                        onItemSelected={(index) => {

                        }}>
                        {this._createTabItem('老赖备份')}
                        {this._createTabItem('放贷详情')}
                    </SegmentNavBar>
                </View>
            </View>
        );
    };
    _createTabItem(title) {
        return(
            <SegmentNavBar.Item
                title={title}
                onPress={() => {

                }}>
                {this._renderComponent(title)}
            </SegmentNavBar.Item>
        );
    };
    _renderComponent=(title)=> {
        if (title === '放贷详情') {
            return(
                <LendingDetailsPage/>
            )
        } else if (title === '老赖备份') {
            return (<BackUpDetailsPage/>);
        }
    };
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#f0f0f0'
    },
    titleView:{
        backgroundColor:'#ffffff',
        width:width,
        alignItems:'center',
        justifyContent:'center',
        height:Platform.OS==='ios'?64:44
    },
    titleMsg:{
        fontSize:17,
        color:'#000000',
        marginTop:Platform.OS==='ios'?34:14,
        marginBottom:29/2
    },
    goBackView:{
        position: 'absolute',
        top:Platform.OS==='ios'?65/2:25/2,left:15,
    },
    goBackImg:{
        height:18,
        width:18
    },
    completeView:{
        position: 'absolute',
        right:15,bottom:29/2
    },
    completeMsg:{
        color:'#3090dd',
        fontSize:17
    },
    navigationView:{
        justifyContent:'center',
        marginTop:Platform.OS==='ios'?10:-14
    },
    showView:{
        position: 'absolute',
        top:Platform.OS==='ios'?68:45,right:15,zIndex:5,
        width:110,
        borderRadius:5,
        opacity:1
    },
    triangleLeft:{
        width: 0,
        height: 0,
        backgroundColor: 'rgba(0,0,0,0)',
        borderStyle: 'solid',
        borderLeftWidth: 6,
        borderRightWidth: 6,
        borderBottomWidth: 8,
        borderTopWidth: 8,
        borderLeftColor: 'transparent',
        borderRightColor: '#000000',
        borderTopColor: 'transparent',
        borderBottomColor: '#000000',
        marginLeft:80
    },
    triangleRight:{
        width: 0,
        height: 0,
        backgroundColor: 'rgba(0,0,0,0)',
        borderStyle: 'solid',
        borderLeftWidth: 6,
        borderRightWidth: 6,
        borderBottomWidth: 8,
        borderTopWidth: 8,
        borderLeftColor: '#000000',
        borderRightColor: 'transparent',
        borderTopColor: 'transparent',
        borderBottomColor: '#000000',
    }
});
